<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>编辑角色</title>
    <link rel="stylesheet" th:href="@{/src/css/layui.css}">
    <link rel="stylesheet" th:href="@{/src/zTree_v3/css/zTreeStyle/zTreeStyle.css}">
</head>
<body>
<form class="layui-form" style="width:80%;" id="arf">
    <!-- 权限提交隐藏域 -->
    <input type="hidden" id="menuId" name="menuId"/>
    <input type="hidden" id="roleId" name="roleId" th:value="${roles.roleId}"/>
    <div class="layui-form-item">
        <label class="layui-form-label">角色名</label>
        <div class="layui-input-block">
            <input type="text" id="roleName" class="layui-input userName" lay-verify="required"
                   placeholder="请输入角色名" name="roleName" th:value="${roles.roleName}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">角色描述</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入角色描述" class="layui-textarea linksDesc" lay-verify="required"
                      name="roleRemark" >[[${roles.roleRemark}]]</textarea>
        </div>
    </div>
    <!--权限树xtree  -->
    <div class="layui-form-item">
        <label class="layui-form-label">分配权限：</label>
        <ul id="xtree" class="ztree" style="width:200px;margin-left: 105px"></ul>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="button" class="layui-btn" lay-submit="" id="editRole" value="立即提交"/>
        </div>
    </div>
</form>
<script th:src="@{/src/layui.js}"></script>
<script th:src="@{/src/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/src/zTree_v3/js/jquery.ztree.all.js}"></script>
<script>

        //加载权限树
    $(function () {
        var settings={
            data:{
                simpleData:{
                    enable:true,  //使用简单的数据格式
                    idKey:'menuId',//节点ID
                    pIdKey:'parentId' //定义当前节点的父节点Id
                },
                key:{
                    name:'title',//节点的名称
                    title:'title'
                }
            },
            check:{
                enable:true
            },
            view:{
                showIcon:false
            }

        }
        $.ajax({
            url:'/menus/loadCheckTree/'+$("#roleId").val(),
            type:'get',
            dataType:'json',
            success:function (result) {
                $.fn.zTree.init($("#xtree"),settings,result)
            }
        })

    });

        layui.use(['layer','form'],function () {
            var layer = layui.layer;

            //执行编辑
            $("#editRole").click(function () {
                //获取当前权限树形菜单所勾选的节点
                var tree = $.fn.zTree.getZTreeObj("xtree");
                var arr = tree.getCheckedNodes(true);//获取选中的节点
                var str  = "";
                $.each(arr,function (index,obj) {
                    str+=obj.menuId+",";
                })
                str = str.substring(0,str.length-1);
                //将节点的id字符串存储在隐藏域中
                $("#menuId").val(str);
                //alert($("#arf").serialize());
                $.ajax({
                    url:"/roles/updateRole",
                    type:'put',
                    dataType:'json',
                    data:$("#arf").serialize(),
                    success:function (result) {
                        if(result.code == 200){
                            layer.msg('编辑成功',{icon:1},function () {
                                parent.layer.closeAll('iframe');
                                parent.location.reload();
                            })
                        }else{
                            layer.msg(result.message,{icon:5});
                        }
                    }
                })


            });

        })


</script>




</body>
</html>